<template>
  <div class="firmBox">
    <el-container>
      <el-header class="firmHead">
        <el-row type="flex" justify="space-between" align="center">
          <el-col :span="8" style="font-size: 14px">
            <a @click.prevent="$router.push('/firmManage')">
              <i class="el-icon-back"> 返回</i>
              <i class="mainString">|</i>
            </a>
            <span>添加企业</span>
          </el-col>
          <el-col :span="2"><span style="font-size: 14px">黑马管理员</span></el-col>
        </el-row>
      </el-header>
      <el-container style="margin-top: 64px">
        <el-container>
          <el-main class="firmMain">
            <div class="main-top">
              <div class="tally"><span>企业信息</span></div>
              <el-form ref="ruleForm" label-width="100px" :model="dialogForm" :rules="rules">
                <el-row type="flex" justify="center">
                  <el-col :span="10">
                    <el-form-item label="企业名称: " prop="name">
                      <el-input v-model="dialogForm.name" size="small" class="el-input-inner" placeholder="请输入企业名称" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="法人: " prop="legalPerson">
                      <el-input v-model="dialogForm.legalPerson" size="small" class="el-input-inner" placeholder="请输入法人" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                  <el-col :span="10">
                    <el-form-item label="注册地址: " prop="registeredAddress">
                      <el-input v-model="dialogForm.registeredAddress" size="small" class="el-input-inner" placeholder="请输入注册地址" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="所在行业: " prop="industryCode">
                      <el-select v-model="dialogForm.industry" size="small" class="el-input-inner" placeholder="请选择所在行业">
                        <el-option v-for="item in industry" :key="item.industryCode" :label="item.industryName" :value="item.industryCode" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                  <el-col :span="20">
                    <el-form-item label="营业执照: ">
                      <!-- :on-change="handleChange" :file-list="fileList" -->
                      <el-upload
                        class="upload-demo"
                        action=""
                      >
                        <div>
                          <el-button size="small" type="primary" icon="el-icon-upload">上传文件</el-button>
                          <div slot="tip" class="el-upload__tip">支持扩展名：.png .jpg .jpeg，文件大小不得超过5M</div>
                        </div>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div class="main-bottom">
              <div class="tally"><span>联系人信息</span></div>
              <el-form ref="ruleForm" label-width="100px" :model="dialogForm" :rules="rules">
                <el-row type="flex" justify="center">
                  <el-col :span="10">
                    <el-form-item label="企业联系人: " prop="contact">
                      <el-input v-model="dialogForm.contact" size="small" class="el-input-inner" placeholder="请输入企业联系人" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="联系电话: " prop="contactNumber">
                      <el-input v-model="dialogForm.contactNumber" size="small" class="el-input-inner" placeholder="请输入联系电话" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-main>
          <el-footer style="margin-top: 30px">
            <el-form>
              <el-form-item>
                <el-row type="flex" justify="center">
                  <el-col style="text-align: center">
                    <el-button style="margin-right: 40px" size="medium">重置</el-button>
                    <el-button size="medium" type="primary" @click="uploadFirmMessage">确认</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { addEnterprise, industryEnterprise } from '@/api/parkManage'
export default {
  name: 'FirmDialog',
  data() {
    return {
      dialogForm: {
        name: '', // 企业名称
        legalPerson: '', // 企业法人
        registeredAddress: '', // 注册地址
        industryCode: '', // 行业编号
        businessLicenseUrl: '', // 上传文件
        businessLicenseId: '', // 上传文件ID
        contact: '', // 企业联系人
        contactNumber: '' // 企业联系方式
      },
      industry: [], // 企业所属行业列表
      rules: {
        name: [
          { required: true, message: '数据不能为空', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        legalPerson: [
          { required: true, message: '数据不能为空', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        registeredAddress: [
          { required: true, message: '数据不能为空', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        industryCode: [
          { required: true, message: '数据不能为空', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        businessLicenseUrl: [
          { required: true, message: '数据不能为空', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        businessLicenseId: [
          { required: true, message: '数据不能为空', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        contact: [
          { required: true, message: '数据不能为空', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        contactNumber: [
          { required: true, message: '数据不能为空', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入11位手机号', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.industryEnterprise() // 获取企业及所属行业
  },
  methods: {
    uploadFirmMessage() { // 企业添加
      addEnterprise()
    },
    async  industryEnterprise() { // 查询企业及所属行业
      const res = await industryEnterprise()
      this.industry = res.data
    }
  }
}
</script>

<style lang="scss" scoped>
  .firmHead{
    height: 64px;
    line-height: 64px;
    position: fixed;
    background-color: rgb(255, 255, 255);
    z-index: 100;
    width: 100%;
    .mainString{
      padding: 0 10px;
      color: #dcdfe5;
    }
  }
  .firmMain{
    background-color: #f4f6f8;
    padding: 20px 130px;
    .main-top{
      margin-bottom: 20px;
    }
    .main-bottom{
      margin-bottom: 20px;
    }
  }
  .tally{
    height: 50px;
    line-height: 50px;
    span{
      height: 22px;
      padding-left: 10px;
      border-left: 2px solid #4770ff;
    }
  }
  .el-input-inner{
        width: 80%;
      }
</style>
